<template>
<div style="display:grid;width:100%;height:100%">
    <div :style="{width: width, height: height}" style="overflow:auto;padding:20px;position: relative;" id="strNode" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove" >
        <div style="width:fit-content;height:fit-content;">
            <str :data="datax" :isMenu="isMenu" :cutMenu="cutMenu"/>
        </div>
    </div>
</div>
</template>

<script>
import STR from './StrNode.vue'
export default {
  name: 'StrDiv',
  components: {
    str: STR
  },
  data () {
    return {
      x: 0,
      y: 0,
      top: 0,
      left: 0,
      move: false,
      down: false,
      datax: this.data
    }
  },
  props: {
    width: {
      type: [String],
      default: '100%'
    },
    height: {
      type: [String],
      default: '100%'
    },
    // 树型数据
    data: {
      type: [Array]
    },
    // 是否开启菜单
    isMenu: {
      type: Boolean,
      default: false
    },
    // 自定义菜单
    cutMenu: {
      type: Array
    }
  },
  watch: {
    'data': {
      handler: function (e, old) {
        this.datax = e
      }
    }
  },
  methods: {
    mousedown (e) {
      e && e.preventDefault()
      let dom = document.getElementById('strNode')

      this.move = false
      this.down = true
      this.x = e.clientX
      this.y = e.clientY
      this.top = dom.scrollTop
      this.left = dom.scrollLeft
    },
    mouseup (e) {
      e && e.preventDefault()

      this.move = false
      this.down = false
    },
    mousemove (e) {
      this.move = true
      if (this.down) {
        let x = this.x - e.clientX
        let y = this.y - e.clientY
        let dom = document.getElementById('strNode')

        dom.scrollLeft = this.left + x
        dom.scrollTop = this.top + y
      }
    }
  },
  created () {
    // 如果创建的时候是空data
    // 默认设置一个data
    let data = this.datax
    if (!data || data.length === 0) {
      data = [
        {
          name: '新建节点'
        }
      ]
      this.datax = data
    }
  }
}
</script>

<style scoped>
</style>
